<template>
	<div class='popup'>
		<div
			:style="{
				'padding': padding
			}"
			class="container"
		>
			<Iconfont
				class="close-icon"
				name="icon-a-Vector1"
				size="24"
				color="#01937C"
				@click="$emit('close')"
			/>
			<div class="title center">{{title}}</div>
			<slot />
			<div
				v-if="btnText"
				class="center"
				:style="{'margin-top': `${btnMargin}px`}"
			>
				<Button	@click="$emit('clickBtn')">{{btnText}}</Button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    btnText: {
      type: String,
      default: ''
    },
    btnMargin: {
      type: Number,
      default: 61
    },
    padding: {
      type: String,
      default: '44px 30px'
    }
  },
}
</script>

<style lang='scss' scoped>
.popup .container {
  .close-icon {
    position: absolute;
    top: 24px;
    left: 30px;
    cursor: pointer;
  }

  .title {
    font-size: 24px;
    line-height: 24px;
    color: #003e34;
  }
}
</style>
